/*
  学习目标：组件的更新原理
  步骤：
     1. 数据变化了，后代组件都会被更新
     2. 兄弟组件不会受影响
     3. 优化点：后代组件都会被更新 - 等会处理优化的事情

     1. 减轻 state 的内容，也就是页面用不到的内容，不要放在 state 中
        (id,定时器)
      2. shouldComponentUpdate(nextProps, nextState),
      返回 true 组件更新
      返回 false 组件不更新
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
  };
  componentDidMount() {
    this.id = '我要储存的id';
    console.log('this.id -----> ', this.id);
  }

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改数量
        </button>

        <Son></Son>
        <Child></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  state = { msg: 'child' };
  render() {
    console.log('我是Child，我render了 -----> ');
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ msg: '修改了msg' });
          }}
        >
          点我修改 child 的 msg
        </button>
        我是Child
      </div>
    );
  }
}

class Son extends React.Component {
  shouldComponentUpdate() {
    return false;
  }
  render() {
    console.log('我是Son，我render了 -----> ');
    return <div>我是Son</div>;
  }
}
